<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<c:url context="${pageContext.request.contextPath}" value="/static/ueditor/ueditor.all.js" var="ueditor_all"/>
<c:url context="${pageContext.request.contextPath}" value="/static/ueditor/ueditor.config.js" var="ueditor_config"/>
<c:url context="${pageContext.request.contextPath}" value="/static/ueditor/lang/zh-cn/zh-cn.js" var="zh-cn"/>
<c:url context="${pageContext.request.contextPath}" value="/static/ueditor/ueditor.all.js" var="ueditor_all"/>
<%
    String user = request.getParameter("username");
    if(user == null){
        user = "Anonymity";
    }
    session.setAttribute("username", user);
%>
<c:set var="user" value="${username}"/>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link href="${ctx}/static/ueditor/themes/default/css/ueditor.css" rel="stylesheet">
    <link href="${ctx}/static/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
</head>
<body>
    <div class="container" style="margin-top: 300px">

        <form class="form-horizontal" id="search" action="${ctx}/article/search" method="post">
            <div class="form-group">
                <div class="col-md-6 col-md-offset-2">
                    <input name="searchParam" class="form-control" id="searchParam">
                </div>
                <div class="col-md-4">
                    <button class="btn btn-info" onclick="search()"><span class="glyphicon glyphicon-search"></span>Search</button>
                    <a class="btn btn-info"  data-toggle="modal" data-target="#editKnowledge"><span class="glyphicon glyphicon-plus"></span>Add Knowledge</a>
                </div>
            </div>
        </form>

    </div>

    <div class="modal fade" id="editKnowledge" tabindex="-1" role="dialog" aria-labelledby="editKnowledgeLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        Add Knowledge
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" action="${ctx}/article/save" id="knowledge">
                        <input type="hidden" name="id" id="id" value="">
                        <div class="form-group">
                            <label class="col-md-1 control-label" for="title">标题</label>
                            <div class="col-md-11">
                                <input class="form-control" id="title" name="title" placeholder="请输入标题">
                            </div>
                        </div>
                        <div class="form-group">
                            <input type="hidden" name="content" id="plainText">
                            <input type="hidden" name="html" id="article">
                            <label class="col-md-1 control-label" >内容</label>
                            <div class="col-md-11">
                                <!-- 加载编辑器的容器 -->
                                <script id="container" name="content" type="text/plain" style="width:100%;height:300px">

                                </script>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">Close
                    </button>
                    <button type="button" class="btn btn-primary" onclick="check()">
                        Add
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="${ctx}/static/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx}/static/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${ctx}/static/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="${ctx}/static/ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript">
        var ue = UE.getEditor('container',{
            //fullscreen:true,
            allowDivTransToP: false
        });
        ue.ready(function(){
            ue.focus();
        });

        $("#editKnowledge").on("show.bs.modal", function(e){
            var id = Date.parse(new Date()) + parseInt(Math.random()*1000) ;
            $("#id").val(id);
        });

        $("#editKnowledge").on("hide.bs.modal", function(e){
            $("#title").val("");
            ue.setContent("");
            return true;
        });

        function check(){
            if(ue.hasContents()){
                $("#article").val(ue.getContent());
                $("#plainText").val(ue.getContentTxt());
                //$("#knowledge").submit();
                var articl = {
                    id: $("#id").val(),
                    title: $("#title").val(),
                    html: ue.getContent(),
                    creator:"${user}"
                };

                $.ajax({
                   type:"POST",
                    url: "${ctx}/article/save",
                    data: articl,
                    success: function(res){
                        alert(res);
                    }
                });
            }
        }

        function search(){
            var searchParam = $("#searchParam").val();
            if(!!searchParam){
                $("#search").submit();
            }
        }


    </script>
</body>
</html>
